<template>
    <div class="container" :style="'height: '+docheight+'px'">
      <leftcont></leftcont>
      <div class="righCont">
        <topcont></topcont>
        <div class="content">
          <div class="mainCont">
            <div class="mainTop">
              <div class="mainTitle">基本详情</div>
              <btn value="限流用户"></btn>
            </div>
            <div class="userInfo">
              <div class="userLeft">
                <div class="userImg">
                  <img :src="detailInfo.user.head_img+ossSrc">
                </div>
              </div>
              <div class="userRight">
                <div class="userRightInfo">
                  <div class="infoItem">
                    <div class="infoName">家长称呼:</div>
                    <div class="infoVal">{{ detailInfo.call_name }}家长<span class="isAuthText" v-if="detailInfo.user.is_auth==2">已实名</span></div>
                  </div>
                  <div class="infoItem">
                    <div class="infoName">是孩子的:</div>
                    <div class="infoVal">{{ detailInfo.identity }}</div>
                  </div>
                  <div class="infoItem">
                    <div class="infoName">相亲编号:</div>
                    <div class="infoVal">{{ detailInfo.dating_number }}</div>
                  </div>
                  <div class="infoItem">
                    <div class="infoName">创建时间:</div>
                    <div class="infoVal">{{ detailInfo.user.create_time }}</div>
                  </div>
                  <div class="infoItem">
                    <div class="infoName">账号状态:</div>
                    <div class="infoVal">
                      <span class="greenBtn" v-if="detailInfo.user.user_status==1">正常</span>
                      <span class="redBtn" v-if="detailInfo.user.user_status==2">限流</span>
                    </div>
                  </div>
                  <div class="infoItem">
                    <div class="infoName">会员状态:</div>
                    <div class="infoVal">
                      <span class="greenBtn" v-if="detailInfo.user.is_member==2">诚意会员</span>
                      <span v-if="detailInfo.user.is_member==1">非会员</span>
                    </div>
                  </div>
                  <div class="infoItem">
                    <div class="infoName">消费金额:</div>
                    <div class="infoVal">{{ detailInfo.user.xf_money }}元</div>
                  </div>
                  <div class="infoItem">
                    <div class="infoName">账号金币:</div>
                    <div class="infoVal">{{ detailInfo.user.gold_coins }}金币</div>
                  </div>
                  <div class="infoItem">
                    <div class="infoName">联系电话:</div>
                    <div class="infoVal">{{ detailInfo.contact_mobile }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="mainTop" style="margin-top:50px">
              <div class="mainTitle">相亲信息</div> 
              <div class="mainTopBtn">
                <btn value="复制资料"></btn>
              </div>
            </div>
            <div class="userInfo" >
              <div class="userRight">
                <div class="userRightHead">基本信息</div>
                <div class="userRightInfo">
                    <div class="infoItem">
                        <div class="infoName">孩子性别:</div>
                        <div class="infoVal">{{ detailInfo.child_sex==1?'男':'女' }}</div>
                    </div>
                    <div class="infoItem">
                        <div class="infoName">出生年份:</div>
                        <div class="infoVal">{{ detailInfo.child_birth_date }}年</div>
                    </div>
                    <div class="infoItem">
                        <div class="infoName">孩子身高:</div>
                        <div class="infoVal">{{ detailInfo.child_height }}cm</div>
                    </div>
                    <div class="infoItem">
                        <div class="infoName">孩子体重:</div>
                        <div class="infoVal">{{ detailInfo.child_weight }}kg</div>
                    </div>
                    <div class="infoItem">
                        <div class="infoName">孩子学历:</div>
                        <div class="infoVal">{{ detailInfo.child_education }}</div>
                    </div>
                    <div class="infoItem">
                        <div class="infoName">孩子职业:</div>
                        <div class="infoVal">{{ detailInfo.child_career }}</div>
                    </div>
                    <div class="infoItem">
                        <div class="infoName">孩子月薪:</div>
                        <div class="infoVal">{{ detailInfo.child_salary_start+'~'+detailInfo.child_salary_end }}元</div>
                    </div>
                    <div class="infoItem">
                        <div class="infoName">孩子现居:</div>
                        <div class="infoVal">{{ detailInfo.child_address }}</div>
                    </div>
                    <div class="infoItem">
                        <div class="infoName">家乡户籍:</div>
                        <div class="infoVal">{{ detailInfo.child_domicile }}</div>
                    </div>
                </div>
                <div class="userRightHead">其他信息</div>
                <div class="userRightInfo">
                    <div class="infoItem">
                        <div class="infoName">是否有房:</div>
                        <div class="infoVal">{{ detailInfo.is_room }}</div>
                    </div>
                    <div class="infoItem">
                        <div class="infoName">是否有车:</div>
                        <div class="infoVal">{{ detailInfo.is_car }}</div>
                    </div>
                    <div class="infoItem">
                        <div class="infoName">婚姻状况:</div>
                        <div class="infoVal">{{ detailInfo.wedding }}</div>
                    </div>
                    <div class="infoItem">
                        <div class="infoName">何时结婚:</div>
                        <div class="infoVal">{{ detailInfo.expect_wedding_time }}</div>
                    </div>
                </div>
                <div class="userRightHead">择偶要求</div>
                <div class="userRightInfo">
                    <div class="infoItem">
                        <div class="infoName">身高要求:</div>
                        <div class="infoVal">{{ detailInfo.zo_height }}cm</div>
                    </div>
                    <div class="infoItem">
                        <div class="infoName">体重要求:</div>
                        <div class="infoVal">{{ detailInfo.zo_weight }}kg</div>
                    </div>
                    <div class="infoItem">
                        <div class="infoName">年龄要求:</div>
                        <div class="infoVal">{{ detailInfo.zo_age }}岁</div>
                    </div>
                    <div class="infoItem">
                        <div class="infoName">学历要求:</div>
                        <div class="infoVal">{{ detailInfo.zo_education }}</div>
                    </div>
                    <div class="infoItem">
                        <div class="infoName">地区要求:</div>
                        <div class="infoVal">{{ detailInfo.zo_address }}</div>
                    </div>
                </div>
                <div class="userRightHead">相亲说明</div>
                <div class="userRightInfo">
                    <div class="infoItem infoDesItem">
                        <div class="infoVal infoDes">{{ detailInfo.dating_describe }}</div>
                    </div>
                </div>
                <div class="userRightHead">孩子照片</div>
                <div class="lifeImg">
                  <img :src="item" :key="index" v-for="(item,index) in photoArr" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
    import leftcont from '@/components/leftCont.vue'
    import topcont from '@/components/topCont.vue'
    import btn from '@/components/public/btn.vue'
    
    import {userDetails} from "@/http/api"

    export default {
      components: {leftcont,topcont,btn},
      data() {
        return {
          detailInfo:{},
          photoArr:[],
        }
      },
      props: {},
      methods:{
        getdata(){
          var data ={
            user_id:this.$route.query.id,
          }
          userDetails(data).then((res)=>{
            if(res.data.code==1){
              this.detailInfo = res.data.data
              if(this.detailInfo.child_photo!=''){
                this.photoArr = this.detailInfo.child_photo.split(',')
              }
            }else{
              this.$message(res.data.msg)
            }
          }).catch((err)=>{
            this.$message('服务器请求超时');
          })
        }
      },
      mounted(){
      },
      created() {
        this.getdata()
      },
    }
  </script>
  
  <style scoped lang="less">
    .container{
      width: 100%;
      display: flex;
      overflow: hidden;
      .righCont{
        display: flex;
        flex-direction: column;
        flex: 1;
        margin-left: 15px;
        height: 100%;
        width: 10px;
        background-color: #F4F8FF;
        .content{
          padding: 20px;
          box-sizing: border-box;
          width: 100%;
          flex: 1;
          overflow: auto;
          .mainCont{
            width: 100%;
            padding: 15px;
            box-sizing: border-box;
            background-color: #fff;
            .redBtn{
              color: #F56C6C;
            }
            .greenBtn{
              color: #85CE61;
            }
            .blueBtn{
                color: #96A1FE;
              }
            .blackBtn{
              color: #666;
            }
            .mainTop{
              display: flex;
              margin-bottom: 25px;
              align-items: center;
              justify-content: space-between;
              .mainTitle{
                font-size: 16px;
                font-weight: bold;
              }
            }
            .userInfo{
              width: 100%;
              padding: 30px;
              display: flex;
              background-color: #eff2fe;
              box-sizing: border-box;
              align-content: center;
              .userLeft{
                .userImg{
                  width: 120px;
                  height: 120px;
                  padding: 4px;
                  border-radius: 50%;
                  background-color: #ffa718;
                  position: relative;
                  .sexTag{
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    height: 30px;
                    width: 60px;
                    line-height: 30px;
                    text-align: center;
                    font-size: 12px;
                    background-color: #ffa718;
                    color: white;
                    border-radius: 15px;
                  }
                  img{
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                  }
                }
              }
              .userRight{
                width: 200px;
                flex: 1;
                box-sizing: border-box;
                padding: 15px;
                .userRightHead{
                  width: 80px;
                  text-align: right;
                  font-size: 15px;
                  margin-top: 30px;
                  font-weight: bold;
                }
                .lifeImg{
                  display: flex;
                  flex-wrap: wrap;
                  padding-left: 95px;
                  margin-top: 20px;
                  box-sizing: border-box;
                  img{
                    height: 200px;
                    margin-bottom: 20px;
                    margin-right: 10px;
                  }
                }
                .hasMargin{
                  margin-top: 30px;
                }
                .desInfo{
                  padding-left: 95px;
                  box-sizing: border-box;
                  margin-top: 20px;
                }
                .userRightInfo{
                  width: 100%;
                  display: flex;
                  flex-wrap: wrap;
                //   justify-content: space-between;
                  .infoItem{
                    width: 28%;
                    margin: 0 2%;
                    margin:10px 0px;
                    display: flex;
                    line-height: 20px;
                    font-size: 14px;
                    .infoName{
                      width: 80px;
                      text-align: right;
                      margin-right: 15px;
                      color: #999;
                    }
                    .infoDes{
                        width: 600px;
                        padding-left: 20px;
                    }
                    .isAuthText{
                      // color: #F56C6C;
                      background-color:#F56C6C;
                      color: #fff;
                      font-size: 12px;
                      padding: 1px 8px;
                      border-radius: 20px;
                      margin-left: 5px;
                    }
                  }
                  .infoDesItem{
                    width: 100%;
                  }
                }
              }
            }
            .payTable{
              margin-top: 20px;
              width: 100%;
              background-color: #fff;
              padding: 15px;
              box-sizing: border-box;
              .trendTop{
                font-weight: bold;
                font-size: 16px;
                cursor: pointer;
              }
              .tableSerchCont{
              width: 100%;
              display: flex;
              justify-content: flex-end;
              margin-bottom: 10px;
              .serchItem{
                width: 150px;
                margin-left: 10px;
              }
            }
              .tableCont{
                width: 100%;
                margin-top: 15px;
                .tableSerchCont{
                  width: 100%;
                  display: flex;
                  justify-content: flex-end;
                  margin-bottom: 10px;
                  .serchItem{
                    width: 150px;
                    margin-left: 10px;
                  }
                  .timeItem{
                    margin-left: 10px;
                  }
                }
                .ctrolBtn{
                  display: flex;
                  .text_btn{
                    margin: 0 5px;
                    cursor: pointer;
                    font-size: 14px;
                  }
                  .redBtn{
                    color: #F56C6C;
                  }
                  .blueBtn{
                    color: #96A1FE;
                  }
                  .greenBtn{
                    color: #85CE61;
                  }
  
                }
                .pageCont{
                  padding: 30px 0;
                  display: flex;
                  justify-content: center;
                }
              }
            }
          }
        }
      }
    }
  </style>
  